<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- item 就是遍历到的每一项，这个名字可以写别的，一般都叫item -->
        <!-- 在进行v-for渲染的时候，我们记得要给他绑定一个唯一的key值，目的是为了提高虚拟dom的渲染效率 -->
        <!-- 我们在绑定key的时候，这个key一定要唯一，不能有重复的，否则会报错!!! -->
        <!-- <li v-for="item in persons" :key="item.id">
          {{ item.name }} {{ item.address }}
        </li> -->

        <!-- <li v-for="(item,index) in persons" :key="item.id">
          {{ index + 1 }} {{ item.name }} {{ item.address }}
        </li> -->

        <!-- 如果我们的视图中，只是遍历一次，如果item中又没有唯一值，那么这个时候，使用index可以暂时替代唯一的key -->
        <!-- 但是如果视图中，有多个遍历，这个时候，就不要使用index作为唯一值的 -->
        <!-- 实际开发中，我们使用key，一般都是遍历到的那一项的唯一值 -->
        <li v-for="(item,index) in persons" :key="index">
          {{ index + 1 }} {{ item.name }} {{ item.address }}
        </li>
      </ul>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          persons: [
            { id: 1001, name: '尹志平', address: '武当山' },
            {
              id: 1002,
              name: '欧阳锋',
              address: '西域'
            },
            {
              id: 1003,
              name: '灭绝师太',
              address: '峨眉山'
            }
          ]
        }
      })
    </script>
  </body>
</html>
